<template>
    <div class="HomePage_Main_Box_css">
        <div class="HomePage_Content_Box_css">
            <div class="HomePage_Top_Content_Box_css">
                <div class="HomePage_Top_left_Content_Box_css">
                    <Usergrowthtrend></Usergrowthtrend>
                </div>
                <div class="HomePage_Top_right_Content_Box_css">
                    <Userproportion></Userproportion>
                </div>
            </div>
            <div class="HomePage_Below_Content_Box_css">
                <div class="HomePage_Below_left_Content_Box_css">
                    <Moduleheat></Moduleheat>
                </div>
                <div class="HomePage_Below_centre_Content_Box_css">
                    <Videopopularity></Videopopularity>
                </div>
                <div class="HomePage_Below_right_Content_Box_css">
                    <Membershipproportion></Membershipproportion>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Usergrowthtrend from './Usergrowthtrend.vue';
import Userproportion from './Userproportion.vue';
import Moduleheat from './Moduleheat.vue';
import Videopopularity from './Videopopularity.vue';
import Membershipproportion from './Membershipproportion.vue'
export default {
    name:'HomePage',
    components:{
        Usergrowthtrend,
        Userproportion,
        Moduleheat,
        Videopopularity,
        Membershipproportion
    }
}
</script>

<style>
    .HomePage_Main_Box_css{
        width: 83vw;
        height: 86vh;
    }
    .HomePage_Content_Box_css{
        width: 100%;
        height: 100%;
    }
    .HomePage_Top_Content_Box_css{
        width: 100%;
        height: 50%;
    }
    .HomePage_Below_Content_Box_css{
        width: 100%;
        height: 50%;
    }
    .HomePage_Top_left_Content_Box_css{
        width: 70%;
        height: 100%;
        float: left;
    }
    .HomePage_Top_right_Content_Box_css{
        width: 30%;
        height: 100%;
        float: left;
    }
    .HomePage_Below_left_Content_Box_css{
        width: 33%;
        height: 100%;
        float: left;
    }
    .HomePage_Below_centre_Content_Box_css{
        width: 33%;
        height: 100%;
        float: left;
    }
    .HomePage_Below_right_Content_Box_css{
        width: 33%;
        height: 100%;
        float: left;
    }
</style>